<template>
 <div class="meun">
   <!-- 按钮 -->
   <div class="btns">
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      <el-button type="primary">全部展开</el-button>
      <el-button type="primary">全部折叠</el-button>
   </div>

   <!-- 表格 -->
   <el-table
      :data="menuPermissions"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column type="index" label="ID" width="50" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="type" label="类型">
         <template #default="{ row }">
            <span>{{ row.type === 1 ? '菜单' : '按钮' }}</span>
         </template>
      </el-table-column>
      <el-table-column prop="rule" label="规则" />
      <el-table-column prop="rule" label="操作">
         <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEditMenuPermissions(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleRemoveMenuPermissions(row)">删除</el-button>
         </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
   <el-dialog v-model="dialogVisible" :title="(permissionsItem.id ? '修改' : '添加') + '编辑菜单权限'" width="500">
      <el-form :model="permissionsItem" label-width="80px" label-suffix=":">
         
         <el-form-item label="父级菜单">
            <el-tree-select
               v-model="permissionsItem.pid"
               :data="parentMenus"
               check-strictly
               :render-after-expand="false"
               placeholder="请选择父级菜单"
            >
               <!-- <template #default="{ data: {name} }">
                  {{ name }}
               </template> -->
            </el-tree-select>
            <!-- <el-select v-model="permissionsItem.pid" placeholder="请选择父级菜单">
               <el-option label="Zone No.1" value="shanghai" />
               <el-option label="Zone No.2" value="beijing" />
            </el-select> -->
         </el-form-item>

         <el-form-item label="名称">
            <el-input v-model="permissionsItem.name" placeholder="请输入菜单名称" autocomplete="off"></el-input>
         </el-form-item>

         <el-form-item label="类型">
            <el-radio-group v-model="permissionsItem.type">
               <el-radio :value="1">菜单</el-radio>
               <el-radio :value="2">按钮</el-radio>
            </el-radio-group>
         </el-form-item>

         <el-form-item label="规则">
            <el-input v-model="permissionsItem.rule" placeholder="请输入权限规则" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="排序">
            <el-input v-model="permissionsItem.order" placeholder="请输入菜单排序" autocomplete="off"></el-input>
         </el-form-item>

         <el-form-item label="状态">
            <el-switch v-model="permissionsItem.status" active-text="启用" inactive-text="禁用" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
         </el-form-item>

      </el-form>
      <template #footer>
         <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleMenuPermissions">
               {{ permissionsItem.id ? '修改' : '添加' }}
            </el-button>
         </div>
      </template>
   </el-dialog>
 </div>
</template>

<script lang='ts' setup>
import { computed, ref, watch } from 'vue'
import { getAllMenuPermissions, addMenuPermission, updateMenuPermission, deleteMenuPermission } from '@/api/menu-permission'
import { ElMessageBox } from 'element-plus'
import { transToTree } from '@/utils'

// 所有权限原始数据
const originPermissions = ref<IPermissions[]>([])

// 所有菜单权限数据
const menuPermissions = ref<IPermissions[]>([])


// 查询所有菜单权限数据
const getAllMenuPermission = async () => {
   const res = await getAllMenuPermissions()
   originPermissions.value = res.list
   const tree = transToTree(res.list)
   //console.log(tree)
   menuPermissions.value = tree
}
getAllMenuPermission()

// 对话框显示隐藏
const dialogVisible = ref<boolean>(false)
// 编辑对话框中的数据
const permissionsItem = ref<IPermissions>({
   id: '',
   pid: '',
   name: '',
   type: 1,
   rule: '',
   icon: '', 
   parentId: '',
   status: true,
})

// 在树形选择框中的数据（父级菜单）结构
const parentMenus = computed(() => {
   // 筛选出原始数据中所有菜单级权限数据
   let menus: any = originPermissions.value.filter(item => item.type === 1)
   // 修改数据的结构 
   menus = menus.map((item: any) => {
      return {
         pid: item.pid,
         id: item.id,
         value: item.id,
         label: item.name,
      }
   })
   // 转树形结构
   const tree =  transToTree(menus)
   return tree
}) 

// 重置表单中的数据
const resetPermissionsItem = () => {
   permissionsItem.value = {
      id: '',
      pid: '',
      name: '',
      type: 1,
      rule: '',
      icon: '', 
      parentId: '',
      status: true,
   }
}

// 监听对话框的状态
watch(dialogVisible, (newValue) => {
   if(!newValue){
      resetPermissionsItem()
   }
})

// 点击编辑按钮打开编辑对话框，回显表单数据
const handleEditMenuPermissions = (row: IPermissions) => {
   // 打开对话框
   dialogVisible.value = true
   // 回显表单数据
   permissionsItem.value = { ...row}
}
// 添加菜单权限
const handleMenuPermissions = async() => {
   // console.log(permissionsItem.value)

   // 根据表单数据中是否有id，来判断是添加还是修改
   if(permissionsItem.value.id){
      // 修改
      // 发送网络请求修改
      await updateMenuPermission(permissionsItem.value)
   }else {
      // 发送网络请求添加
      await addMenuPermission(permissionsItem.value)
      // console.log(result)
   }
   // 关闭对话框
   dialogVisible.value = false
   // 重新增加菜单权限
   getAllMenuPermission()
   // // 重置表单中的数据
   // resetPermissionsItem()
}

// 删除
const handleRemoveMenuPermissions = async(row: IPermissions) => {
   try {
      const confirmResult =  await ElMessageBox.confirm('此操作将永久删除该菜单权限, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
      })
      // 发送网络请求删除
      // console.log(row)
      // await deleteMenuPermission(row.id)
      if(confirmResult === 'confirm'){
         // 请求删除接口
         await deleteMenuPermission(row.id)
         // 重新加载菜单权限数据
         getAllMenuPermission()
      }
   } catch (error) {
      console.log('取消', error)
   }
}
</script>

<style lang='scss' scoped>
.meun{
   padding: 12px;
   .btns{
      margin-top: -10px;
      margin-bottom: 10px;
   }
}
</style>
